<template>
  <div>
    888888
    <header>
      <div class="hd">
        <p>昊鑫企业信用卡系统</p>
        <p class="fr">
           <span>
          首页
          </span>
          <span>
            个人中心
          </span>
          <span>
            退出
          </span>
        </p>

      </div>
      <div class="navcss">

        <div v-for="(li,index) in list"  @click="guige(index,li)" :class="{choose:index==guigeSpan}">
          {{li.name}}
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  export default {
    name: 'head',
    data:function(){
      return{
        index:'',
        list:[{name:"首页",url:'/index'},
          {name:"数据管理",url:'/datamanage'},
          {name:"电催管理",url:'/phonemanage'},
          {name:"协催管理",url:'/assistmanage'},
          {name:"外访管理",url:'/visitmanage'},
          {name:"诉讼管理",url:'/litigationmanage'},
          {name:"录音管理",url:'/datamanage'},
          {name:"减免管理",url:'/datamanage'},
          {name:"统计报表",url:'/statistics'},
          {name:"协同办公",url:'/works'},
          {name:"员工管理",url:'/staff'},
          {name:"系统设置",url:'/system'}],
        guigeSpan:"0",
      }
    },
    methods :{
      guige:function(index,li){ //当点击时候点亮，同级的span标签删除Class
        console.log(this.guigeSpan)
        console.log(index,li)
        this.guigeSpan = index;
        this.$router.push({path: li.url})
      },
    },
    created:function(){
      this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
        console.log(data.body[0])


      })
    }
  }
</script>

<style>
  .navcss{overflow: hidden;text-align: center;border-bottom: 1px solid #e3e3e3;font-size: 12px;color: #fff;background: #3a629f;}
  .navcss div{float: left;width: 75px;padding: 10px 0;}
  .navcss div:hover{background: #2b518a;cursor: pointer;}
  .choose{background: #2b518a;border-bottom:4px solid #feb935;}
  .hd{
    background: #1c4584;
    color: #fff;
    overflow: hidden;
  }
  .fr{float: right!important;}
  .hd p{
    line-height: 10px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 24px;
    float: left;
  }
  .hd p span{font-size: 12px; margin: 0 10px;}
  .hd p span:hover{color: #ffd649;cursor: pointer}
</style>
